<template>
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 -->
			<w-tit 
			leftIcon="arrowleft" 
			color="#595757" 
			background="#fff" 
			fontweight="600"
			@confirm="rightSearch" 
			rightIconNum="two" 
			is_searchs="true">
			</w-tit>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" >
			<!--动态 @scrolltolower="loadmore()"-->
			<template v-if="(searchlist.group && searchlist.group.length > 0) | (searchlist.single && searchlist.single.length > 0) ">
				<template v-if="searchlist.single && searchlist.single.length > 0">
					<view class="body-box">
						<view class="body-box-top">联系人</view>
						<block v-for="(item,index) in searchlist.single" :key="index">
							<view class="body-cen" @click.stop="todet1(item.uid,item.nickname,item.type)">
								<view class="com-imgs">
									<image class="com-img" :src="item.img || $mAssetsPath.icon_mrtx"></image>
								</view>
								<view class="com-box-r">
									{{item.nickname}}
								</view>
							</view>
						</block>
					</view>
				</template>
				<template v-if="searchlist.group && searchlist.group.length > 0">
					<view class="body-box">
						<view class="body-box-top">群聊</view>
						<block v-for="(item,index) in searchlist.group" :key="index">
							<view class="body-cen" @click.stop="todet2(item.groupID,item.name,item.type)">
								<view class="com-imgs2">
									<block v-for="(ite,ind) in item.users" :key="ind">
										<image class="com-img" :src="ite.img || $mAssetsPath.icon_mrtx" v-if="ind<9"></image>
									</block>
								</view>
								<view class="com-box-r">
									{{item.name}}
								</view>
							</view>
						</block>
					</view>
				</template>
			</template>
			<!--无数据-->
			<template v-else>
				<view class="nodata">
					<view class="nodata-txt" @click.stop="tosel('1')">联系人</view>
					<view class="nodata-txt" @click.stop="tosel('2')">群聊</view>
				</view>
			</template>
		</scroll-view>

	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back-serch-add.vue'; //标题
	import chatList from '@/components/w-chat/chat-list.vue'; //聊天组件
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import {
			mapGetters,
			mapActions,
			mapState
		} from 'vuex';
	import TIM from 'tim-js-sdk';
	import store from '@/store';
	import { getCompanyLists,getBannerLists,orderCounts,getUserCompanys,getUserInfos,getCompanyUserInfos,getMailLists,tencentImAuths } from '@/common/api.js';
	export default {
		components: {
			wTit,
			chatList,loadMore
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist: {
					group: [],
					single:[]
				},
				searchlist: {
					group: [],
					single:[]
				},
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
			}
		},
		computed: {
			...mapGetters(['userInfo', 'userSig','companyInfo','selIndex','contactList']),
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				conversationList: state => state.conversationList,
			}),
		},
		onShow() {
			//uni.removeTabBarBadge(OBJECT)
		},
		onLoad(option) {
			console.log(222,option);
			if(option){
				if(option.pageType === 'search'){
					this.getdata();
				}
			}
		},
		methods:{
			...mapActions('user',['setCompanyInfo','setSelIndex','setUserInfo','setContactList','setUserSig']),
			//跳转单聊天页面
			todet1(id,name,type){
				let uid = this.companyInfo.id + ':' + id
				this.$store.commit('createConversationActive', uid)
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${uid}&name=${name}&type=C2C`
				})	
			},
			//跳转群聊聊天页面
			todet2(id,name,type){
				this.$store.commit('createConversationActives', id)
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${id}&name=${name}&type=GROUP`
				})
			},
			//获取初始数据
			getdata(){
				let _self = this;
				//通讯录数据
				this.datalist.single = this.contactList;
				// 群聊数据
				let promise = this.tim.getGroupList();
				promise.then(function(imResponse) {
				  console.log('群组列表',imResponse.data.groupList); // 群组列表
				  let obj = {
				  	user:{},
				  	users:[]
				  };
				  if(imResponse.data.groupList && imResponse.data.groupList.length>0){
					  imResponse.data.groupList.forEach(item=>{
						  let users = []
						  _self.$set(item,'users',users)
						  if(item.type === "Private"){
							  //获取群列表
							  let promise2 = _self.tim.getGroupMemberList({ groupID: item.groupID, count: 9, offset:0 }); // 从0开始拉取30个群成员
							  promise2.then(function(imResponse2) {
							    console.log('成员列表：',imResponse2.data.memberList, _self.contactList); // 群成员列表
							    if(_self.contactList && _self.contactList.length>0){
							  	  _self.contactList.forEach(ite=>{
							  		  if(imResponse2.data.memberList && imResponse2.data.memberList.length>0){
							  			  imResponse2.data.memberList.forEach(i=>{
											  
							  				  if(i.userID === (_self.companyInfo.id+':'+ite.uid)){
							  					  item.users.push(ite)
							  				  }
							  			  })
							  		  }
							  	  })
							  	  _self.datalist.group.push(item)
							  	  _self.$forceUpdate();
							    }
							  }).catch(function(imError2) {
							    console.log('getGroupMemberList error:', imError2);
							  });
						  }
					  })
				  }
				  
				}).catch(function(imError) {
				  console.log('getGroupList error:', imError); // 获取群组列表失败的相关信息
				});
				console.log(3333,this.datalist)
			},
			//跳转聊天界面
			tomsg(id,name,type){
				uni.navigateTo({
					url:`/pages/message/messageInfo?id=${id}&name=${name}&type=${type}`
				})
			},
			tosel(type){
				if(type === '1'){
					this.searchlist.single = this.datalist.single;
				}else if(type === '2'){
					this.searchlist.group = this.datalist.group;
				}
			},
			//弹窗城市搜索
			rightSearch(e) {
				console.log(111, e.value)
				let _self = this;
				this.$nextTick(function() {
					_self.is_show_hot = false;
				})
				let searchlistA = []
				if (this.datalist.single && this.datalist.single.length > 0) {
					this.datalist.single.forEach(item => {
						searchlistA.push(item)
					})
				}
				const searchlistB = this.datalist.group.map((item)=>({
					name:item.name,
					groupID:item.groupID
				}))
				this.searchlist.single = this.searchList(e.value, searchlistA)
				let searchlistBB = this.searchList(e.value, searchlistB)  //this.searchlist.group
				let searchlistBBB = [];
				if(this.datalist.group && this.datalist.group.length>0){
					this.datalist.group.forEach(item=>{
						if(searchlistBB && searchlistBB.length>0){
							searchlistBB.forEach(item2=>{
								if(item.groupID === item2.groupID){
									searchlistBBB.push(item)
								}
							})
						}
					})
				}
				this.searchlist.group = searchlistBBB;
			},
			//模糊搜索
			searchList(str, container) {
				var newList = [];
				//新的列表
				var startChar = str.charAt(0);
				//开始字符
				var strLen = str.length;
				//查找符串的长度
				for (var i = 0; i < container.length; i++) {
					var obj = container[i];
					var isMatch = false;
					for (var p in obj) {
						if (typeof(obj[p]) == "function") {
							obj[p]();
						} else {
							var curItem = "";
							if (obj[p] != null) {
								curItem = obj[p];
							}
							for (var j = 0; j < curItem.length; j++) {
								if (curItem.charAt(j) == startChar) {
									if (curItem.substring(j).substring(0, strLen) == str) {
										isMatch = true;
										break;
									}
								}
							}
						}
					}
					if (isMatch) {
						newList.push(obj);
					}
				}
				return newList;
			},
			
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			height: calc(100% - 90rpx - var(--status-bar-height));
			.nodata{
				margin-top: 30rpx;
				display: flex;
				.nodata-txt{
					text-align: center;
					flex: 1;
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-gray6;
					border-right: 1rpx solid #ddd;
				}
			}

			.body-box {
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				margin-top: 20rpx;
				.body-box-top{
					font-size: 28rpx;
					font-weight: 400;
					line-height: 60rpx;
					color: $font-color-9;
					border-bottom: 1rpx solid #f5f5f5;
					margin-bottom: 20rpx;
				}
				.body-cen{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.com-imgs{
						display: flex;
						width: 96rpx;
						height: 96rpx;
						margin-right: 30rpx;
						
						.com-img{
							width: 96rpx;
							height: 96rpx;
							border-radius: 10rpx;
						}
					}
					.com-imgs2 {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
						width: 96rpx;
						height: 96rpx;
						border-radius: 10rpx;
						overflow: hidden;
						padding: 2rpx;
						background: $uni-but-bg-color-b;
						margin-right: 30rpx;
					
						.com-img {
							width: 28rpx;
							height: 28rpx;
							margin: 0 4rpx 4rpx 0;
						}
					
						.com-img:nth-of-type(3n) {
							margin: 0 0 4rpx 0;
						}
					}
					.com-box-r{
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}
			}
			
		}

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
		}
	}
</style>
